<template>
	<view>
		<view class="card">
			<view class="left">
				<image src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/logo.png" mode="" class="img"></image>
			</view>
			<view class="right">
				<text class="title">南澳嵘璟房产经纪有限公司</text>
				<text class="type">1-1㎡/1室/嵘璟房产</text>
				<view class="tags-list">
					<text>在售</text><text>小户型</text><text>低单价</text>
				</view>
				<view class="price">
					<text class="total">1万起</text>
					<text class="unit-price">1万/㎡</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>
	.card{
		width: 100%;
		display: flex;
		align-items: center;
		background-color: $uni-bg-color;
		box-sizing: border-box;
		padding: mp-sizing(5);
		padding-bottom: mp-sizing(15);
		border-bottom: 1px solid #c8c7cc;
		.left{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: mp-sizing(15);
			.img{
				width: mp-sizing(90);
				height: mp-sizing(80);
			}
		}
		.right{
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			.title{
				font-size: mp-sizing(18);
				font-weight: 600;
			}
			.type{
				font-size: mp-sizing(16);
			}
			.tags-list{
				display: flex;
				flex-flow: row wrap;
				text{
					font-size: mp-sizing(8);
					color: $uni-text-color-grey;
					padding: mp-sizing(2);
				}
			}
			.price{
				display: flex;
				.total{
					font-size: mp-sizing(16);
					color: #dd524d;
					font-weight: 600;
					margin-right: mp-sizing(10);
				}
				.unit-price{
					font-size: mp-sizing(15);
					color: $uni-text-color-grey;
				}
			}
		}
	}
</style>